<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			{{fruits[0]}} {{fruits[1]}} {{fruits[2]}}
			<h1 v-for='(item,index) in fruits'>
				第{{index+1}}种水果：{{item}}
			</h1>
			数组：元素内容,元素下标
			<h1 v-for='(item,index) in list'>
				第{{index+1}}件事：{{item}}
			</h1>
			0-10
			
			<h1 v-for='i in 11'>
				{{i-1}}
			</h1>
			<h1 v-for='(value,key) in student'>
				{{key}}:{{value}}
			</h1>

			<ul>
				<li v-for='(item,index) in goods' :key='index'>
					商品名称：{{item.title}} <br>
					商品价格：{{item.price}}
				</li>
			</ul>
			<table border="1">
				<tr v-for='row in table'>
					<td v-for='col in row'>{{col}}</td>
				</tr>
			</table>
		</div>
		<script>
			Vue.createApp({
				data() {
					return {
						fruits: ['苹果', '香蕉', '梨'], //定义一个数组
						list: ['吃饭', '睡觉', '学习'],
						student: {
							name: "张三",
							cls: '软技2306'
						},
						goods: [ //商品列表
							{
								title: '华为手机',
								price: 1999
							},
							{
								title: '小米手机',
								price: 1899
							}
						],
						table:[
							[1,2,4,1,0,0],
							[1,2,4,2,1,1],
							[1,1,5,1,0,0]
						]
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>
